<template>
  <div>
  <div class="header">
    <el-form :model="searchForm" inline>
       <el-form-item label="用户名称">
        <el-input placeholder="请输入用户名称进行查询" v-model="searchForm.account"></el-input>
       </el-form-item>
       <el-form-item>
        <el-button @click="handleSearch">查询</el-button>
       </el-form-item>
    </el-form>
    <el-button @click="showAddAcount">新增</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
  <el-table-column prop="account" lable="用户名"/>
  <el-table-column prop="level" lable="等级"/>
  <el-table-column label="操作">
    <template #default="{row}">
    <el-button size="small" @click="updateAccont(row)">编辑</el-button>
    <el-button size="small" type="danger" @click="deleteAccount(row)">删除</el-button>
  </template>
  </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="resetAccountDialog" >
    <el-form :model="accountForm" label-width="120px">

    <el-frorm-item label="名称">
      <el-input placeholder="请输入用户名称" v-model="accountForm.account"></el-input>
    </el-frorm-item>

    <el-form-item label="等级">
      <el-input placeholder="请输入用户等级" v-model.number="accountForm.level"></el-input>
    </el-form-item>

    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetAccountDialog">取消</el-button>
        <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">确认</el-button>
        <el-button type="primary" @click="updateAccountHandle" v-else>确认</el-button>
      </span>
    </template>

  </el-dialog>

</div>
</template>


<script setup>
import {ref,computed,getCurrentInstance} from 'vue';
import {getDataApi,addAccountApi,deleteAccountApi,updateAccontApi} from '../utils/mockServer/db'

const DEFAULTLEVEL = 1
const DIALOGTITLEMAP = {
  0:'新增',
  1:'修改'
}
const {proxy: _this} = getCurrentInstance()
//列表数据
const tableData = ref([])
//搜索数据
const searchForm = ref({
  account:''
})
//新增/修改时的表单
const accountForm = ref({
  account:'',
  level:DEFAULTLEVEL,
  id:0
})
//新增/修改弹框
const dialogVisible = ref (false)
//弹框类型
const dialogTypeMap = ref({
  add:0,
  modify:1
})
//弹框类型
const dialogType = ref(dialogTypeMap.value.add)
//弹框标语
const dialogTitle = computed(()=>{
  return DIALOGTITLEMAP[dialogType]
})
//请求全部数据
const getData = (account) =>{
  tableData.value = getDataApi({account})
}
getData()
//搜索操作
const handleSearch = () =>{
  getData(searchForm.value.account)
}
const showAddAcount = () =>{
  dialogVisible.value = true
  dialogType.value = dialogTypeMap.value.add
}

const addAccount = () =>{
  //获取弹框中的数据
  const {account, level} = accountForm.value
  const accountObj = {
    account,
    level
  }
  //调用接口
  addAccountApi(accountObj)
  _this.$message({
    type:'success',
    message:'添加成功',
  })
  getData()
  resetAccountDialog()
}

const updateAccont = (row) =>{
  dialogVisible.value = true
  dialogType.value = dialogTypeMap.value.modify

  const {account,level,id} = row
  accountForm.value.account = account
  accountForm.value.level = level
  accountForm.value.id = id
}
const updateAccountHandle = () =>{
  updateAccontApi(accountForm.value)

  _this.$message({
    type:'success',
    message:'更新成功',
  })
  getData()
  resetAccountDialog()
}

const deleteAccount =  (row) =>{
  _this.$confirm('是否要删除该账号','警告',
  {
    confirmButtonText:'确认',
    cancelButtonText:'取消',
    type:'warning',
  }
  )
  .then(() =>{
    deleteAccountApi(row)
    _this.$message({
      type:'success',
      message:'删除成功',
    })
    getData()
  },() => {
    _this.$message({
      type:'info',
      message:'取消删除',
    })
  })
}
const resetAccountDialog = () =>{
  dialogVisible.value = false
  accountForm.value.account=''
  accountForm.value.level = DEFAULTLEVEL
}
</script>

<style scoped>
.header{
  display: flex;
  justify-content: space-between;
}
</style>